<template>
  <div>
    <p @click="editname1">{{ name1 }}</p>
    <hr />
    <p @click="editname2">{{ name2 }}</p>
    <ul>
      <li v-for="item in nameArr" :key="item">{{ item }}</li>
    </ul>
    <p @click="addname"><button>添加人</button></p>
    <ul>
      <li v-for="item in manStar" :key="item">{{ item }}</li>
    </ul>
    <p @click="addman"><button>添加男明星</button></p>
  </div>
</template>

<script>
// 在vue3中组件模板中不限制必须有一个根标签
// 在vue3中引入ref 响应式函数
import { ref, reactive } from "vue";
export default {
  name: "App",
  components: {},
  data() {
    return {
      name1: "成龙",
    };
  },
  methods: {
    editname1() {
      this.name1 = "房世龙";
      console.log(this.editname2);
    },
  },
  // 组合式的api函数,所有的数据定义,事件方法,生命周期函数,计算属性和监听watch 都写在该setup函数中
  // 注意: setup 函数必须有一个返回值,为对象形式,将要在页面中使用的数据和方法都通过该对象返出去

  // 01: ref : 为一个响应处理函数,一般用来处理基本数据类型,可以将基本数据类型的数据处理成响应式的数据,
  // 返回一个refImpel 的引用对象,该对象的value 就是响应式的数据
  // 语法: let 响应式的数据 = ref(基本数据类型的数据)
  // 原理: ref 如果处理的是基本数据类型,实现响应式的原理就是利用vue2的Object.defineProperty 给数据设置get 和set方法,实现数据劫持或监听
  // 原理: ref 如果处理的是复杂数据类型(数组或对象),实现响应式的原理就是 Proxy 代理,监听数据的改变,进而操作页面实现重新渲染

  // 02: 不建议将vue2 的语法和vue3的语法混着使用
  // 在vue2的事件处理函数中,既可以获取当前实例对象的数据和方法 也可以获取 vue3方式定义的数据和方法
  // 返回来在vue3 语法中setup中,因为setup函数中没有this,this为undefined,所以获取不了vue2语法设置的数据和方法

  // 03: setup的执行时间
  // setup 是一个生命周期函数,.它的执行时间比breforeCreate更早.该生命周期函数中的this 为undefined

  //04: reactive 用来处理复杂数据类型的响应式,并且他只能处理复杂数据类型的响应式
  // 和ref 比较 ref 既能处理基本数据类型的响应式 也能处理复杂数据类型的响应式
  // 注意: ref 处理复杂类型的响应式数据时候,他还是借助了reactive 来处理复杂数据类型,而 reactive实现数据响应式的原理是
  // 借助 Proxy 这个代理对象实现的数据响应式
  beforeCreate() {
    // console.log("beforeCreate");
  },
  created() {
    // console.log("created");
  },
  mounted() {
    // console.log("mounted");
  },
  setup() {
    // console.log("setup");
    // ref 处理基本数据类型
    let name2 = ref("房祖名");
    // console.log("name2", name2);
    const editname2 = () => {
      name2.value = "新房祖名";
      // console.log(name2);
      // console.log(this);
    };

    //ref 处理复杂数据类型
    let nameArr = ref(["小红", "小绿"]);
    console.log(nameArr.value);
    const addname = () => {
      nameArr.value.push("小黄");
      // console.log(nameArr);
    };

    // reactive 处理复杂数据类型,只能处理复杂数类型
    let manStar = reactive(["胡歌", "彭于晏"]);
    console.log(manStar);
    const addman = () => {
      manStar.push("黄宗泽");
    };

    return {
      name2,
      editname2,
      nameArr,
      addname,
      manStar,
      addman,
    };
  },
};
</script>

<style>
</style>
